<template>
  <div id="app">
    <!-- 底部Tabbar -->
    <div class="tabbar" v-show="showTabbar">
      <div
        class="tarbar-item"
        v-for="(item, key) in titleMaps"
        :key="item.title"
      >
        <img
          :src="`https://java.crmeb.net/static/tabBar/${
            curId == key ? item.src : item.selectedSrc
          }`"
          alt=""
        />
        <router-link
          :class="{ activetab: curId == key }"
          @click.native="changeTab(key, item.title)"
          :to="{ name: item.route }"
          >{{ item.title }}
        </router-link>
      </div>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  name: "AppView",

  data() {
    return {
      curId: 0,
      titleMaps: {
        0: {
          title: "首页",
          route: "IndexVue",
          src: "shouxuan.png", // 选中
          selectedSrc: "shouwei.png", // 未选中
        },
        1: {
          title: "分类",
          route: "ClassifyView",
          src: "fenxuan.png", // 选中
          selectedSrc: "fenxuan.png", // 未选中
        },
        2: {
          title: "购物车",
          route: "ShoppingCartView",
          src: "gouxuan.png", // 选中
          selectedSrc: "gouwei.png", // 未选中
        },
        3: {
          title: "我的",
          route: "MyView",
          src: "woxuan.png", // 选中
          selectedSrc: "wowei.png", // 未选中
        },
      },

      showTabbar: true, // 隐藏Tabbar
    };
  },
  methods: {
    changeTab(id) {
      console.log(id);
      this.curId = id;
      sessionStorage.setItem("ids", id);
    },
  },
  created() {
    const id = sessionStorage.getItem("ids") * 1 || 0;
    this.curId = id;
  },
  watch: {
    // 隐藏tabbar
    $route(to) {
      if (
        to.path.startsWith("/ProductDetails") ||
        to.path.startsWith("/CouponsList") ||
        to.path.startsWith("/DetailsAll")
      ) {
        this.showTabbar = false;
      } else {
        this.showTabbar = true;
      }
    },
  },
};
</script>
<style lang="scss">
#app {
  background-color: #eee !important;
}
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}
.tabbar {
  background-color: lightblue;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  .tarbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 24px;
      height: 24px;
    }
  }
  a {
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    color: black;
    font-size: 12px;
    // &.router-link-exact-active {
    //   color: #ec0ca9;
    //   }
  }
  p {
    font-size: 10px;
    margin-top: 3px;
  }
}
// }

.activetab {
  color: #ec0ca9 !important;
}

// nav {
// padding: 30px;

// a {
//   font-weight: bold;
//   color: #2c3e50;

//   &.router-link-exact-active {
//     color: #ec0ca9;
//   }
// }
// }
</style>
